<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import WorldCom from '@/components/ThreeJS/WorldCom/WorldCom.vue'
import api from '@/api'
import { storeToRefs } from 'pinia'
import { roleStore } from '@/stores/role'
import { useUserStore } from '@/stores/user'
import { headersStore } from '@/stores/apiHeader'
import { mapStore } from '@/stores/worldMap'
import { getAllPoint } from './EarthCompositionAPI'
const rolesStore = roleStore()
const { businessLevel } = rolesStore
const { userInfo } = useUserStore() as any
const threeMapId = ref(null) // 实例化地球
const scopeCode = headersStore().scope_code // 获取区域code

const earthData = reactive({
  coordinates: [],
  rotation: '关闭旋转',
})

const inFoEarthData = async () => {
  const params = {
    scopeCode: headersStore().point_code,
    bussinessCode: userInfo.bussinessCode,
    financeCode: userInfo.financeCode,
    supplyCode: userInfo.supplyCode,
  }
  const res = await api.getInitEarthInfo(params)
  const { code, data } = res

  if (code == 0 && data) {
    earthData.coordinates = data.coordinates
    setTimeout(() => {
      infoEarth()
    }, 0)
  }
}

// 初始化
const infoEarth = () => {
  infoMap()
  // createLabelObj()
  // flyLineChange()
  // mapStore
  const theMapStore = mapStore()
  const { initTime } = storeToRefs(theMapStore)
  setTimeout(() => {
    columnChange() // 添加光柱
    createAreaPoint()
  }, initTime.value)
}

onMounted(() => {
  inFoEarthData()
  // 测试获取全球所有点
  // getAllPoint()
})

// 重置
const reset = () => {
  // infoMap()
  // inFoEarth()
  // window.location.reload()
}

// 地球添加标记点
const infoMap = () => {
  for (let i = 0; i < earthData.coordinates.length; i++) {
    for (let r = 0; r < earthData.coordinates[i].endArray.length; r++) {
      threeMapId.value.infoMark(earthData.coordinates[i].endArray[r])
    }
  }
}

// 移动相机
const cameraPos = (item) => {
  console.log('🚀 ~ file:移动相机 ~ cameraPos ~ item:', item)
  threeMapId.value.cameraPos(item)
}

// 开启或关闭地球自动旋转
const rotationY = ref(false)
const rotationChange = () => {
  rotationY.value = !rotationY.value
  threeMapId.value.rotation()
  threeMapId.value.frameDivClose()
  earthData.rotation = rotationY.value == true ? '开启旋转' : '关闭旋转'
}

// 添加光柱infoColumn
const columnChange = () => {
  for (let i = 0; i < earthData.coordinates.length; i++) {
    for (let r = 0; r < earthData.coordinates[i].endArray.length; r++) {
      threeMapId.value.infoColumn(earthData.coordinates[i].endArray[r])
    }
  }
}

// 添加标签
const createLabelObj = () => {
  for (let i = 0; i < earthData.coordinates.length; i++) {
    for (let r = 0; r < earthData.coordinates[i].endArray.length; r++) {
      threeMapId.value.createLabelObj(earthData.coordinates[i].endArray[r])
    }
  }
}

// 添加区域点
const createAreaPoint = () => {
  for (let i = 0; i < earthData.coordinates.length; i++) {
    for (let r = 0; r < earthData.coordinates[i].endArray.length; r++) {
      setTimeout(() => {
        threeMapId.value.createAreaPoint(earthData.coordinates[i].endArray[r])
      }, Math.random() * 1000)
    }
  }
}

// 添加飞线infoFlyLine
const flyLineChange = () => {
  threeMapId.value.createFlyLine(earthData.coordinates)
}

// 删除所有标记点
const delAllChange = () => {
  for (let i = 0; i < earthData.coordinates.length; i++) {
    for (let r = 0; r < earthData.coordinates[i].endArray.length; r++) {
      threeMapId.value.delAll(earthData.coordinates[i].endArray[r])
    }
  }
}

// 删除指定标记点
const delMarkChange = () => {
  let item = {
    name: '美国',
  }
  threeMapId.value.delMark(item)
}

// 监听窗口变化重置地球渲染
// window.addEventListener('resize', () => {
//   console.log('监听窗口变化重置地球渲染')
//   reset()
// })
onBeforeUnmount(() => {
  threeMapId.value.dispose()
})
</script>

<template>
  <div class="home">
    <WorldCom ref="threeMapId" />
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100vw;
  height: calc(100vh - 75px);
}

$color1: #e6e53c; // 亚太
$color2: #3ce648; // 欧亚
$color3: #3cbce6; // 美洲
$color4: #e6843c; // 非洲
$color5: #ff0000; // 中国
</style>
